<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<style>

    .m-green-checkbox:checked + .m-green-label,
    .m-green-checkbox:not(:checked) + .m-green-label {
        background-color: #e0e0e0;
        border-radius: 24px;
        cursor: pointer;
        display: inline-block;
        height: 24px;
        position: relative;
        text-indent: -9999px;
        width: 48px;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .m-green-checkbox:checked + .m-green-label:after,
    .m-green-checkbox:not(:checked) + .m-green-label:after {
        background-color: #fff;
        border-radius: 20px;
        content: " ";
        height: 20px;
        left: 2px;
        position: absolute;
        top: 2px;
        width: 20px;
        -webkit-transition: left 0.3s;
        transition: left 0.3s;
    }

    .m-green-checkbox:checked + .m-green-label {
        background-color: #58AF96;
    }

    .m-green-checkbox:checked + .m-green-label:after {
        left: 26px;
    }

</style>
<body>
<input id="example" class="m-green-checkbox"  type="checkbox" style="display: none">
<label class="m-green-label"  for="example">Check</label>
</body>
</html>